<!--
纯css无js实现轮播图
日期：2022/5/31
-->

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    body{
      position: absolute;
      top: 40%;
      left: 40%;
    }
    .control-visible{
      position: absolute;
      top: 80%;
      left: 44%;
    }
    ul.slides{
      position: relative;
      width: 600px;
      height: 280px;
      list-style: none;
      margin: 0;
      padding: 0;
      background-color: white;
      overflow: hidden;
    }
    li.slide{
      margin: 0;
      padding: 0;
      width: inherit;
      height: inherit;
      position: absolute;
      top: 0;
      left: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 120px;
      color: white;
      transition: .5s transform ease-in-out;
    }
    .slide:nth-of-type(1){
     background-color: red;
      left: 0;
    }
    .slide:nth-of-type(2){
      background-color: yellow;
      left: 100%;
    }
    .slide:nth-of-type(3){
      background-color: aquamarine;
      left: 200%;
    }
    input[type="radio"]{
      position: relative;
      z-index: 100;
      display: none;
    }
    .control-visible label{
      display: inline-block;
      width: 10px;
      height: 10px;
      background-color: white;
      border-radius: 50%;
      margin: 0 3px;
      border: 2px solid yellow;
    }
    .slides input[type="radio"]:nth-of-type(1):checked~.control-visible label:nth-of-type(1){
      background-color: black;
    }
    .slides input[type="radio"]:nth-of-type(2):checked~.control-visible label:nth-of-type(2){
      background-color: black;
    }
    .slides input[type="radio"]:nth-of-type(3):checked~.control-visible label:nth-of-type(3){
      background-color: black;
    }
    .slides input[type="radio"]:nth-of-type(1):checked~.slide{
      transform: translateX(0%);
    }
    .slides input[type="radio"]:nth-of-type(2):checked~.slide{
      transform: translateX(-100%);
    }
    .slides input[type="radio"]:nth-of-type(3):checked~.slide{
      transform: translateX(-200%);
    }
  </style>
</head>
<body>
<ul class="slides">
  <input type="radio" id="control1" name="control" checked/>
  <input type="radio" id="control2" name="control"/>
  <input type="radio" id="control3" name="control"/>

  <li class="slide">1</li>
  <li class="slide">2</li>
  <li class="slide">3</li>
  <div class="control-visible">
    <label for="control1"></label>
    <label for="control2"></label>
    <label for="control3"></label>
  </div>


</ul>
</body>
</html>